<template>
  <view class="container">
    <!-- 小区基本信息 -->
    <view class="community-header">
      <view class="header-title">阳光城檀府</view>
      <view class="header-subtitle">小区详情信息</view>
      <view class="tag-group">
        <view class="tag">大户型</view>
        <view class="tag">单价便宜</view>
      </view>
      <view class="info-item">
        <text>物业类型：住宅</text>
      </view>
      <view class="info-item">
        <text>竣工时间：暂无</text>
        <text>物业费：1.00元/m</text>
      </view>
      <view class="info-item">
        <text>交易权属：商品房住宅</text>
      </view>
      <view class="info-item">
        <text>小区地址：上海xx路x号134号</text>
      </view>
    </view>

    <!-- 在售房源 -->
    <view class="house-list">
      <view class="house-header">
        <text>在售房源</text>
        <view class="price-info">
          <text>8000元/m</text>
          <text>170套</text>
          <text>9000元/m</text>
        </view>
        <text>当月挂牌均价</text>
        <text>在售房源</text>
        <text>同区域挂牌均价</text>
      </view>
      <view class="house-item" v-for="(item, index) in houseList" :key="index">
        <view class="house-thumb">
          <image src="https://via.placeholder.com/120x100" mode="aspectFill"></image>
        </view>
        <view class="house-content">
          <view class="house-desc">
            <text>大户型！精装修，价格可...</text>
            <text>3室2厅 128m 阳光城檀府</text>
          </view>
          <view class="house-price">
            <text>90万</text>
            <text>8000元/m</text>
          </view>
          <view class="house-tag">
            <text>房东急售！送车位</text>
          </view>
        </view>
      </view>
      <view class="see-all-btn" @click="showAll">查看全部</view>
    </view>

    <!-- 周边配套 -->
    <view class="supporting-facilities" @click="goToAreaZhoubian()">
      <view class="section-title">周边配套</view>
      <!-- 这里可扩展具体配套内容 -->
      <!-- 内容占位部分 -->
      <view class="content-placeholder">
        <view class="placeholder-dot"></view>
      </view>
    </view>

    <!-- 优秀经纪人 -->
    <view class="agent-list">
      <view class="section-title">优秀经纪人</view>
      <view class="agent-item" v-for="(agent, index) in agentList" :key="index">
        <view class="agent-avatar">
          <image src="https://via.placeholder.com/80x80" mode="aspectFill"></image>
        </view>
        <view class="agent-desc">
          <text>葛毅</text>
          <text>个人介绍</text>
        </view>
      </view>
    </view>

    <!-- 同地段小区 -->
    <view class="same-area-community">
      <view class="section-title">同地段小区</view>
      <view class="community-item" v-for="(community, index) in sameAreaList" :key="index">
        <view class="community-thumb">
          <image src="https://via.placeholder.com/120x100" mode="aspectFill"></image>
        </view>
        <view class="community-content">
          <view class="community-name">
            <text>{{ community.name }}</text>
          </view>
          <view class="community-price">
            <text>{{ community.price }}元/m</text>
            <text>{{ community.count }}套在售</text>
          </view>
          <view class="community-desc">
            <text>位置信息</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐楼盘 -->
    <view class="recommend-section">
      <view class="section-title">推荐楼盘</view>
      <view class="property-item" v-for="(item, index) in recommendList" :key="index">
        <view class="property-thumb">
          <image src="https://via.placeholder.com/120x100" mode="aspectFill"></image>
        </view>
        <view class="property-content">
          <view class="property-name">{{ item.name }}</view>
          <view class="property-price">
            <text>{{ item.price }}元/m</text>
            <text>在售房屋面积89-111m</text>
          </view>
          <view class="property-desc">位置信息</view>
          <view class="property-tags">
            <text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">{{ tag }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 同商圈小区 -->
    <view class="same-area-section">
      <view class="section-title">同商圈小区</view>
      <view class="community-item" v-for="(community, index) in sameAreaList2" :key="index">
        <view class="community-thumb">
          <image src="https://via.placeholder.com/120x100" mode="aspectFill"></image>
        </view>
        <view class="community-content">
          <view class="community-name">{{ community.name }}</view>
          <view class="community-price">
            <text>{{ community.price }}元/m</text>
            <text>{{ community.count }}套在售</text>
          </view>
          <view class="community-desc">位置信息</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      houseList: [
        {
          thumb: '',
          desc: '大户型！精装修，价格可...\n3室2厅 128m 阳光城檀府',
          price: '90万',
          unit: '8000元/m',
          tag: '房东急售！送车位'
        },
        // 重复数据项...
      ],
      agentList: [
        { name: '葛毅', intro: '个人介绍' },
        { name: '张倩', intro: '个人介绍' },
        // 重复经纪人数据...
      ],
      sameAreaList: [
        { name: '恒大泸州', price: '7000', count: '170' },
        { name: '凯伊半山', price: '6000', count: '100' },
        // 重复小区数据...
      ],
      recommendList: [
        {
          name: "龙井湖韵",
          price: "7000",
          tags: ["优质房源", "绿化率高", "公摊低"],
          desc: "位置信息"
        },
        {
          name: "恒大明月",
          price: "7000",
          tags: ["优质房源", "绿化率高", "公摊低"],
          desc: "位置信息"
        }
      ],
      sameAreaList2: [
        {
          name: "银河星域",
          price: "7000",
          count: "170"
        },
        {
          name: "九龙湾",
          price: "7000",
          count: "170"
        },
        {
          name: "富安银河",
          price: "7000",
          count: "170"
        }
      ]
    };
  },
  methods: {
    showAll() {
      uni.navigateTo({ url: '/pages/houseList/houseList' });
    },
    goToAreaZhoubian(){
      uni.navigateTo({
        url: `/pages/house/areaZhoubian`
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.community-header {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 34rpx;
  font-weight: bold;
}

.header-subtitle {
  color: #666;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.tag {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  padding: 5rpx 15rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
  font-size: 26rpx;
}

.info-item {
  color: #666;
  font-size: 28rpx;
  line-height: 1.6;
}

.house-list {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.house-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.price-info {
  display: flex;
  justify-content: space-around;
  margin: 10rpx 0;
}

.house-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.house-thumb {
  width: 120rpx;
  height: 100rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.house-content {
  flex: 1;
}

.house-desc {
  color: #666;
  font-size: 28rpx;
  line-height: 1.4;
}

.house-price {
  color: #333;
  font-size: 30rpx;
  margin: 10rpx 0;
}

.house-tag {
  color: #999;
  font-size: 26rpx;
}

.see-all-btn {
  text-align: center;
  padding: 20rpx;
  color: #666;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.agent-item {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
}

.agent-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}

.agent-desc text {
  display: block;
  color: #666;
  font-size: 28rpx;
}

.community-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
}

.community-thumb {
  width: 120rpx;
  height: 100rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.community-name {
  font-size: 30rpx;
  color: #333;
}

.community-price {
  color: #666;
  font-size: 28rpx;
  margin: 10rpx 0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.property-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.property-thumb {
  width: 120rpx;
  height: 100rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.property-content {
  flex: 1;
}

.property-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.property-price {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.property-desc {
  color: #999;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.tag {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  font-size: 28rpx;
}

.community-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
}

.community-thumb {
  width: 120rpx;
  height: 100rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.community-content {
  flex: 1;
}

.community-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.community-price {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.community-desc {
  color: #999;
  font-size: 26rpx;
}

.content-placeholder {
  height: 300rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.placeholder-dot {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #e0e0e0;
}
</style>